<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可见度过滤选择器-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }
    div.mini {
      width: 30px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      // 1.改变所有可见的div元素的背景色为 #0000FF
      $("#b1").click(function () {
        $("div:visible").css("background","red")
      })
      // 2.选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
      $("#b2").click(function () {
        $("div:hidden").css("background","green")
        $("div:hidden").show()
      })

      // 3.选取所有的文本隐藏域, 并打印它们的值
      $("#b3").click(function () {
        var $inputs = $("input:hidden");
        alert("length"+$inputs.length)
        // for(var i=0;i<$inputs.length;i++){
        //   var input = $inputs[i];
        //   console.log("值是"+input.value)
        // }

        $inputs.each(function (){
          console.log("值是"+this.value)
          console.log("值是(jquery对象)"+$(this).val())

        })

      })

    })
  </script>
</head>
<body>
<input type="button" value="改变所有可见的 div 元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的 div, 利用 jQuery 中的 show() 方法将它们显示
出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" class="visible">
  div id 为 one
</div>
<div id="two" class="visible">
  div id 为 two
</div>
<div id="three" class="one">
  div id 为 three
</div>
</body>
</html>